<template>
  <div class="page-container">
    <!--审核弹框-->
    <el-dialog title="管理员备注" width="50%" :visible.sync="dialogVisibleAdmin" :close-on-click-modal="false" @closed="handleClose">
      <el-form :model="adminDataForm" label-width="100%" :size="size"
               label-position="right" inline>
        <el-form-item>
          <div style="width:100%;">
            <el-input
              type="textarea"
              placeholder="请输入备注"
              v-model="adminDataForm.auditRemark">
              :rows="4"
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="submitFormAdminNotPass" type="primary">不通过</el-button>
        <el-button :size="size" type="primary" @click.native="submitFormAdmin">通过</el-button>
      </div>
    </el-dialog>


    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" class="border" style="margin-bottom: 15px;">
        <div style="width: 100%;">
          <el-form-item style="width:32%">
            <span style="color: #999;">活动名称</span>
            <span style="margin-left:10px;">{{activityData.promName}}</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">活动ID</span>
            <span style="margin-left:10px;">{{activityData.id}}</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">当前状态</span>
            <span style="margin-left:10px;" v-if="activityData.status == 0">待提交</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 1">待提交</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 2">待审核</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 3">未开始</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 4">审核不通过</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 5">进行中</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 6">已过期</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 7">已关闭</span>
            <span style="margin-left:10px;" v-else>未知状态</span>
          </el-form-item>
        </div>
      </el-form>
      <el-form :inline="true" :model="filters" :size="size" ref="filters" style="text-align: center;">
        <!--<el-button type="primary">查看营销报告</el-button>-->
        <span v-if="activityData.status == 2">
              <div style="margin-top:20px;" v-if="shenhe == 0">
              <el-button type="primary" @click="shenheHuodong(1)">审核</el-button>
                </div>
             </span>
        <span v-if="activityData.status == 1">
               <div style="margin-top:20px;" v-if="shenhe == 0">
                <el-button type="primary" plain :size="size" @click="shenheHuodong(0)">提交审核</el-button>
              </div>
              <div style="margin-top:20px;" v-if="shenhe == 1">
                  <el-button type="primary" plain :size="size" @click="shenheHuodong(1)">审核</el-button>
              </div>
             </span>
      </el-form>
    </div>
    <div class="tab-container">
      <el-alert :closable="false" style="background-color: #ffffff;color: #ffffff;" title="" type="success" />
      <el-tabs type="border-card">
        <el-tab-pane label="促销规则">
          <div>
            <form class="form-horizontal ">
              <div class="pdL10 border-left font-bold mgB15 ng-binding">基本信息</div>
              <div class="form-group">
                <!--活动名称-->
                <label class="col-sm-2 control-label ng-binding" ng-show="promotionDetailContent.promotionMethod != 17">活动名称</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  {{activityData.promName}}
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group">
                <!--活动时间-->
                <label class="col-sm-2 control-label ng-binding" >活动时间</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  {{activityData.startTime}} 至 {{activityData.endTime}}
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding">活动规则</div>
              <div class="form-group ng-scope">
                <!--活动类型(促销类型)-->
                <label class="col-sm-2 control-label ng-binding">活动类型</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  {{getFrontPromType(activityData.frontPromType)}}
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group" v-show="false">
                <!--参与方式-->
                <label class="col-sm-2 control-label ng-binding">活动形式</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  自建
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group">
                <label class="col-sm-2 control-label ng-binding">活动规则说明</label>
                <div class="col-sm-5 pdt3px ng-binding">
                  {{activityData.description}}
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">交易规则</div>
              <div class="form-group">
                <!--是否支持折上折-->
                <label class="col-sm-2 control-label ng-binding">是否支持折上折</label>
                <div class="col-sm-10 pdt3px themeTextColor">
                  <span  v-if="activityData.foldingFlag==1" class="ng-binding ng-scope">是</span>
                  <span  v-else class="ng-binding ng-scope">否</span>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group" v-show="false">
                <!--是否排斥优惠券-->
                <label class="col-sm-2 control-label ng-binding">是否排斥优惠券</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide">是否排斥优惠券（尾款支付）</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  否
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group ng-scope" v-show="false">
                <!--是否包邮-->
                <label class="col-sm-2 control-label ng-binding" >是否包邮</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  否
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType == 1 || promotionDetailContent.promotionType == 14">
                <label class="col-sm-2 control-label ng-binding">超限规则</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  <span  v-if="activityData.foldingFlag==1" class="ng-binding ng-scope">按原价购买</span>
                  <span  v-else class="ng-binding ng-scope">不可购买</span>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div v-show="false" class="">
                <div class="col-sm-2 control-label">
                  <label class="ng-binding"> 供应商分摊比例：</label>
                </div>
                <div class="col-sm-10 control-label">
                  <table border="1">
                    <thead>
                    <tr>
                      <th class="minw110 textCenter">供应商ID</th>
                      <th class="minw110 textCenter">供应商名称</th>
                      <th class="minw110 textCenter">分摊比例</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- ngRepeat: e in promotionDetailContent.selectedSupplierList -->
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding">
                参与条件
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
                <!--活动渠道-->
                <div class="line line-dashed b-b line-lg" ng-show="promotionDetailContent.channelCodes.length > 0"></div>
                <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">
                  <label class="col-sm-2 control-label ng-binding">活动渠道</label>

                  <div class="col-sm-10 pdt3px">
                    <span v-for="(item) in (activityData.channelCodes + '').split('|')" :key="item" class="ng-binding ng-scope">{{getChannelCodes(item)}} &nbsp;</span>
                    <!-- <span ng-repeat="channel in promotionDetailContent.channelCodes" class="ng-binding ng-scope">BBC &nbsp;</span> -->
                  </div>
                </div>

                <div class="line line-dashed b-b line-lg" ng-show="canShowActivityPlatformLimitShow()"></div>
                <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">
                  <label class="col-sm-2 control-label ng-binding">活动平台</label>

                  <div class="col-sm-10 pdt3px">
                    <span v-for="(item) in (activityData.proPlatform + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProPlatform(item)}} &nbsp;</span>
                    <!-- <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">APP端 &nbsp;</span>
                    <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">PC端 &nbsp;</span>
                    <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">微信 &nbsp;</span> -->
                  </div>
                </div>

                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group">
                  <label class="col-sm-2 control-label ng-binding">新老用户</label>
                  <div class="col-sm-10 pdt3px">
                    <span v-for="(item) in (activityData.proUserType + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProUserType(item)}} &nbsp;</span>
                    <!-- <span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope">新用户 &nbsp;</span> -->
                  </div>
                </div>
                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group">
                  <label class="col-sm-2 control-label ng-binding">会员类型</label>
                  <div class="col-sm-10 pdt3px">
                    <span v-for="(item) in (activityData.proMemberType + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProMemberType(item)}} &nbsp;</span>
                    <!-- <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">普通会员 &nbsp;</span> -->
                  </div>
                </div>
                <!-- 会员等级(修改) -->
                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group">
                  <div ng-repeat="e in memberLevelArray" class="ng-scope">
                    <label class="col-sm-2 control-label ng-binding ng-scope" ng-if="$index==0">会员等级:</label>
                    <div class="col-sm-10 pdt3px">
                      <span v-for="(item) in (activityData.proMemberLevel + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProMemberLevel(item)}} &nbsp;</span>
                      <!-- <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">普通会员 &nbsp;</span> -->
                      <!-- <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">注册用户 &nbsp;</span> -->
                      <!-- <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">VIP会员金卡 &nbsp;</span> -->
                      <!-- <span ng-repeat="applicablePlatform in promotionDetailContent.applicablePlatformList" class="ng-binding ng-scope">金卡 &nbsp;</span> -->
                    </div>
                  </div>
                </div>
                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
                  <!--备注-->
                  <label class="col-sm-2 control-label ng-binding">备注</label>
                  <div class="col-sm-10 pdt3px themeTextColor">
                    <quill-editor
                      v-model="activityData.remark"
                      ref="myQuillEditor"
                      style="height: 300px;"

                    >{{activityData.remark}}</quill-editor>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="参与商家/店铺" @click="getMerchantOrStoreList()">
          <el-tabs type="border-card">
            <el-tab-pane label="商家">
              <el-table :data="businessList" border style="width: 100%">
                <el-table-column prop="id" label="商品编码"></el-table-column>
                <el-table-column prop="name" label="商家名称"></el-table-column>
                <el-table-column prop="type" label="组织分类"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="店铺">
              <el-table :data="shopList" border style="width: 100%">
                <el-table-column prop="id" label="店铺编码"></el-table-column>
                <el-table-column prop="name" label="店铺名称"></el-table-column>
                <el-table-column prop="type" label="店铺类型"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="参与商品">
          <div style=" height: 40px;"><el-button size="mini" style="float: left;" type="primary" @click="revokeProduct()">撤出商品</el-button></div>
          <div>
            <el-tabs type="border-card">
              <el-tab-pane label="生效商品">
                <el-table :data="tableDataData" border style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="mpCode" label="商品编码" width="180"></el-table-column>
                  <el-table-column prop="mpName" label="商品名称" width="180"></el-table-column>
                  <el-table-column prop="mpParentId" label="父商品ID"></el-table-column>
                  <el-table-column prop="merchantId" label="商家ID"></el-table-column>
                  <el-table-column prop="merchantName" label="商家名称"></el-table-column>
                  <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                  <el-table-column prop="salePriceWithTax" label="统一零售价（元）"></el-table-column>

                  <!--<el-table-column type="selection" width="55"></el-table-column>-->
                  <!--<el-table-column prop="id" label="商品编码" width="180"></el-table-column>-->
                  <!--<el-table-column prop="productName" label="商品名称" width="180"></el-table-column>-->
                  <!--<el-table-column prop="address" label="商品条码"></el-table-column>-->
                  <!--<el-table-column prop="unit" label="计量单位"></el-table-column>-->
                  <!--<el-table-column prop="shopName" label="商家名称"></el-table-column>-->
                  <!--<el-table-column prop="price" label="统一零售价（元）"></el-table-column>-->
                  <!--<el-table-column prop="markdown" label="直降（元）"></el-table-column>-->
                  <!--<el-table-column prop="shopLimit1" label="商家单渠道限购"></el-table-column>-->
                  <!--<el-table-column prop="shopLimit2" label="店铺单渠道限购"></el-table-column>-->
                  <!--<el-table-column prop="shopLimit3" label="个人单渠道限购"></el-table-column>-->
                  <!--<el-table-column prop="address" label="订单限购"></el-table-column>-->
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="互斥商品">
                <el-table border style="width: 100%">
                  <el-table-column prop="id" label="商品编码" width="180"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                  <el-table-column prop="address" label="商品条码"></el-table-column>
                  <el-table-column prop="unit" label="计量单位"></el-table-column>
                  <el-table-column prop="shopName" label="商家名称"></el-table-column>
                  <el-table-column prop="price" label="互斥记录时间"></el-table-column>
                  <el-table-column prop="markdown" label="操作"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import { format } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { darkmagenta } from 'color-name';
  import tabPane from './components/TabPaneCreateGroupon'
  import qs from 'qs';
  import {
    promTypeConverter,
    frontPromTypeConverter,
    channelCodeConverter,
    proPlatformConverter,
    proUserTypeConverter,
    proMemberTypeConverter,
    proMemberLevelConverter,
    frontPromTypeConverterFull
  } from "@/market/dict/marketDict";

  export default {
    name: 'Tab',
    components: {
      tabPane ,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        tableDataData:[],
        adminDataForm:{
          auditRemark:""
        },
        dialogVisibleAdmin: false,
        shenhe:0,
        size: "small",
        filters: {},
        multipleSelection: [],
        businessList: [{"id": "001", "name": "张小二服饰", "type": "自营商家"}],
        shopList: [{"id": "161616", "name": "张小二bbc店铺", "type": "直营"}],
        tableData: [{
          "id": 1912250010887324,
          "productName": "新供应商001",
          "unit": '件',
          "shopName": '张小二服饰',
          "price": 1.2,
          "markdown": 1,
          "shopLimit1": 100,
          "shopLimit2": 100,
          "shopLimit3": 100,
        }],
        promotionId: this.$route.query.value,
        activityData: {

        },
      };
    },
    created: function(){
      let _this = this;
      let callback = res => {
        console.log(res);
        if (res.code == "0000") {
          _this.activityData = res.data;
        }else{
          //alert("获取促销详情失败");
        }
      };
      let params = {"id": this.$route.query.value};
      this.utils.request.promotionDetailById(params, callback);

      this.mainMerchantFormFind();
      this.mainStoreTableDataFormFind();
    },
    methods: {
      submitFormAdminNotPass(){
        let this_ = this;
        this.dialogVisibleAdmin = false;

        let callback = res => {
          this_.activityData.status=4;
          console.log(res);
        };
        this.adminDataForm.id = this.promotionId;
        this.adminDataForm.status = 4;
        this.utils.request.promotionUpdate(this.adminDataForm, callback);
        this.shenhe = 0;
      },
      submitFormAdmin(){
        let this_ = this;
        this.dialogVisibleAdmin = false;

        let callback = res => {
          this_.activityData.status=3;
          console.log(res);
        };
        this.adminDataForm.id = this.promotionId;
        this.adminDataForm.status = 3;
        this.utils.request.promotionUpdate(this.adminDataForm, callback);
      },

      shenheHuodong(flag){
        let this_ = this;
        if(flag == 0){

          this.$confirm("是否确认提交审核？", "提示", {
            type: "warning"
          })
            .then(() => {
              this.shenhe = 1;

              let callback = res => {
                this_.activityData.status=2;
                this_.shenhe = 0;
                console.log(res);
              };
              let param ={};
              param.id    =this.promotionId;
              param.status         =2;

              this.utils.request.promotionUpdate(param,callback);

            })
            .catch(() => {
            });
        }else{
          this.shenhe = 2;
          this.dialogVisibleAdmin = true;
        }
      },


      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      revokeProduct() {
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.getMerchantProductList();
          } else {
            //alert("修改失败");
          }
        };
        if (this.multipleSelection.length > 0) {
          let ids = this.multipleSelection.map(item => item.id);
          this.utils.request.promotionRevokeProduct({"mpIds": ids}, callback);
        } else {
          this.$message({message: "操作失败, 请选择要撤出的商品",type: "error"});
        }
      },
      createPage(){
        this.$router.push("/CreatePromotion");
      },
      getProPlatform(code){
        return proPlatformConverter(code);
      },
      getProUserType(code){
        return proUserTypeConverter(code);
      },
      getChannelCodes(code){
        return channelCodeConverter(code);
      },
      getFrontPromType(code){
        return frontPromTypeConverterFull(code)
      },
      getProMemberType(code){
        return proMemberTypeConverter(code)
      },
      getProMemberLevel(code){
        return proMemberLevelConverter(code)
      },
      getMerchantOrStoreList(){
        alert("aaa");
      },
      //查询绑定关系的商家
      mainMerchantFormFind(){
        var this_ = this;
        let params ={"promotionId" : this.promotionId, "merchantType": "1"};

        this.utils.request.promotionMerchantList(params, function (res) {
          if (res.code == "0000") {
            this_.businessList = res.data.list.map((ele, index) => {
              let merchant = {};
              merchant.id = ele.id;
              merchant.name = ele.merchantName;
              merchant.type = ele.merchantType == '1' ? '自营商家' : '第三方商户';
              return merchant
            })

          }
        });
      },
      //查询绑定关系的店铺
      mainStoreTableDataFormFind(){
        let params ={"promotionId" : this.promotionId, "merchantType": "2"};
        var  this_ = this;
        this.utils.request.promotionMerchantList(params, function (res) {
          if (res.code == "0000") {
            this_.shopList = res.data.list.map((ele, index) => {
              let store = {};
              store.id = ele.storeId;
              store.name = ele.storename;
              store.type = ele.storeType == '1' ? "线上店铺" : "未知类型";
              return store
            })
          }
        });
      },
      getMerchantProductList(){
        let callback2 = res => {
          if (res.code == "0000") {
            this.tableDataData=res.data.rows;
          }
        };
        var param2 ={};
        param2.promotionId = this.$route.query.value;
        param2.start=1;
        param2.limit=10;
        this.utils.request.promotionMerchantProductList(param2, callback2);
      },
    },
    mounted() {
      // console.log(this.$route.query.id);
      // console.log("-------------------------------查询开始");
      // var queryparam={};
      // queryparam.id = this.$route.query.id;
      // var this_ = this;
      // this.$axios.post("jic-market/patch-groupon-theme/detail",qs.stringify(queryparam)).then(res => {
      //   console.log(res);
      //   if(res.data.code =="0000") {
      //     this_.activityData = res.data.data.rows;
      //   }
      // });
      // console.log("-------------------------------查询结束");

      let callback2 = res => {
        if (res.code == "0000") {
          this.tableDataData=res.data.rows;
        }
      };
      var param2 ={};
      param2.promotionId = this.$route.query.value;
      param2.start=1;
      param2.limit=10;
      this.utils.request.promotionMerchantProductList(param2, callback2);
    }
  };
</script>

<style scoped>
  .border {
    color: #666666;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
    border-bottom: 1px solid #666666;
    padding-bottom: 3px;
  }
  .pdL10 {
    padding-left: 10px!important;
  }
  .mgB15 {
    margin-bottom: 15px!important;
  }
  .border-left {
    border-left: 3px #ddd solid !important;
  }
  .font-bold {
    font-weight: 700;
  }
  .form-group {
    margin-bottom: 15px!important;
    margin-right: -0px!important;
    margin-left: -0px!important;
  }
  .form-horizontal .control-label {
    padding-top: 5px;
    margin-bottom: 0;
    text-align: right;
  }
  .form-horizontal div {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif, "Regular", "Microsoft YaHei";
    font-size: 12px;
    color: #666666;
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    word-wrap: break-word;
  }
  .form-horizontal .control-label {
    padding-top: 3px !important;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  /* .col-sm-10 {
      width: 83.33333333%;
  } */
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
  label {
    font-weight: normal;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .form-group .pdt3px {
    padding-top: 3px;
  }
  .b-b {
    border-bottom: 1px solid #dddddd;
  }
  .line-dashed {
    border-style: dashed !important;
    background-color: transparent;
    border-width: 0;
  }
  .line-lg {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
  }
  table {
    background-color: transparent;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }
  .i-checks {
    padding-left: 0;
    margin-right: 15px;
    cursor: pointer;
    color: #666666;
  }
  .radio-inline, .checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
  }
  .panel-body tr {
    padding: 0 15px;
  }
</style>
